<template>
  <a-form :form="form">
    <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="运费模板名称"
    >
      <a-input
          v-decorator="[
          'freight.name',
          { rules: [{ required: true, message: '请输入' }] },
        ]"
          placeholder="请输入"
      />
    </a-form-item>
    <a-form-item label="计重/计件"
                 :label-col="formItemLayout.labelCol"
                 :wrapper-col="formItemLayout.wrapperCol">
      <a-radio-group name="radioGroup"  v-decorator="[
          'freight.type', { rules: [{ required: true, type: 'number', message:'请选择' }],initialValue: 0 }]">
        <a-radio :value="0">
          计重
        </a-radio>
        <a-radio :value="1">
         计件
        </a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="首重（件）费用"
                 extra="1千克（包含）以下"
                 :label-col="formItemLayout.labelCol"
                 :wrapper-col="formItemLayout.wrapperCol">
      <a-input-number id="inputNumber" :min="0.00" :step="0.01" @change="onChange" v-decorator="[
          'freight.firstWeight',{ rules: [{ required: true, type: 'number',message:'请输入' }], initialValue: 0.00},
        ]" /> 元
    </a-form-item>
    <a-form-item label="续重（件）费用"
                 extra="1千克以上，每千克的费用，不足1千克按1千克计算"
                 :label-col="formItemLayout.labelCol"
                 :wrapper-col="formItemLayout.wrapperCol">
      <a-input-number id="inputNumber" :min="0.00" :step="0.01" @change="onChange" v-decorator="[
          'freight.additionalWeight',{ rules: [{ required: true, type: 'number',message:'请输入' }], initialValue: 0.00},
        ]" /> 元
    </a-form-item>
    <a-form-item label="满件数包邮"
                 extra="填写大于0的整数才有效"
                 :label-col="formItemLayout.labelCol"
                 :wrapper-col="formItemLayout.wrapperCol">
      <a-input-number id="inputNumber" :min="0.00" @change="onChange" v-decorator="[
          'freight.freeCount',{ rules: [{ required: true,  type: 'number',message:'请输入'}],initialValue: 0 },
        ]" /> 件起包邮
    </a-form-item>
    <a-form-item label="不配送省份"
                 :label-col="formItemLayout.labelCol"
                 :wrapper-col="formItemLayout.wrapperCol">
      <a-select
          mode="multiple"
          :size="size"
          placeholder="省份"
          style="width: 100%"
          v-decorator="[
          'freight.notDelivery',
          { rules: [{ required: false, message: '请输入' }] },
        ]"
      >
        <a-select-option v-for="item in provinceArr" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="包邮省份"
                 :label-col="formItemLayout.labelCol"
                 :wrapper-col="formItemLayout.wrapperCol">
      <a-select
          mode="multiple"
          :size="size"
          placeholder="省份"
          style="width: 100%"
          v-decorator="[
          'freight.codes',
          { rules: [{ required: false, message: '请输入' }] },
        ]"
      >
        <a-select-option v-for="item in provinceArr" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="自定义地区运费"
                 :label-col="formItemLayout.labelCol"
                 :wrapper-col="formItemLayout.wrapperCol">
      <a-select
          mode="multiple"
          :size="size"
          label-in-value
          placeholder="省份"
          style="width: 100%"
          @change="handleChange"
          @select="selectFn"
          @deselect="deselectFn"
          v-model="freightLists"
      >
        <a-select-option v-for="item in provinceArr" :key="item.value" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </a-form-item>
        <a-form-item label="设置运费"
                     v-show="list.length>0"
                     :label-col="formItemLayout.labelCol"
                     :wrapper-col="formItemLayout.wrapperCol">
    <a-row v-for="(item,index) in list"
           :key="index">
      <a-col :span="6">
        {{item.label}}
      </a-col>
      <a-col :span="9">
           首重(件)
          <a-input-number id="inputNumber" :min="0":step="0.01" placeholder="请输入" @change="onChange" v-model="item.firstWeight" /> 元
      </a-col>
      <a-col :span="9">
           续重(件)
          <a-input-number id="inputNumber" :min="0":step="0.01" placeholder="请输入" @change="onChange" v-model="item.additionalWeight"  /> 元
      </a-col>
    </a-row>
        </a-form-item>
    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-button type="primary" @click="check">
        提交
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import province from '@/common/province'
import {getFreightDetail,editFreight} from '@/api'
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}
const formItemLayout = {
  labelCol: { span: 5 },
  wrapperCol: { span: 12 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 8, offset: 4 },
};
export default {
  name: "brand-edit",
  data() {
    return {
      freight:{
        name:'',
        codes:'',
        firstWeight:0,
        additionalWeight:0,
        type:0,
        freeCount:0,
        notDelivery:''
      },
      freightLists:[],
      provinceArr:province,  //所有省份的value和label
      // [
      //     {value:'10000',label:'北京市'},
      //     {value:'100100',label:'天津市'}
      // ],
      value: 1,
      list:[],
      size:'default',
      formItemLayout,
      formTailLayout,
      form: this.$form.createForm(this, { name: 'dynamic_rule' }),
    };
  },
  methods: {
    deselectFn(e){
      this.list=this.list.filter(item=>item.key!==e.key)
    },
    selectFn(e){
      this.list.push(e)
    },
    onChange(value) {
    },
    //提交
    check() {
      this.form.validateFields(async (err,values)=> {
        if (!err) {
          if (this.$route.query.id) {
            values.freight.id = this.$route.query.id
          }
          values.freight.codes=values.freight.codes?values.freight.codes.join(','):''
          values.freight.notDelivery=values.freight.notDelivery?values.freight.notDelivery.join(','):''
          values.freightLists=this.list?this.list.map(item=>{
            item.province=item.key
            return item
          }):[]
          await editFreight(values)
          this.$message.success('操作成功')
          this.$router.push('/shop/freight')
        }
      });
    },
    handleChange (e) {
    },
    //详情
    async getFreightDetailFn(){
      const res= await getFreightDetail(this.$route.query.id)
      let cityObj={}; //省份编码号和名称对应的对象
      this.provinceArr.forEach(item=>{
        cityObj[item.value]=item.label;
      })

      this.list=res.value.freightLists.map(item=>{
        // 查看详情返回的数据res.value.freightLists铺到页面上不显示，a-select组件要求数据中有key和label属性，因此做了如下处理
        // freightLists:{
        //   additionalWeight:18,
        //   firstWeight:15
        //   key:"150000"
        //   label:"内蒙古自治区"
        //   province:"150000"
        // }
        return {
          key:item.province+'',
          label:cityObj[item.province+''],
          firstWeight:item.firstWeight,
          additionalWeight:item.additionalWeight,
        }
     })
      this.freight=res.value.freight;
      this.freightLists=this.list;
      // console.log(this.freight)
      let codes=res.value.freight.codes?res.value.freight.codes.split(','):[]
      let notDelivery=res.value.freight.notDelivery?res.value.freight.notDelivery.split(','):[]
      this.form.setFieldsValue({
        'freight.name': this.freight.name,
        'freight.type': this.freight.type,
        'freight.freeCount': this.freight.freeCount,
        'freight.firstWeight': this.freight.firstWeight,
        'freight.additionalWeight': this.freight.additionalWeight,
        'freight.codes': codes,
        'freight.notDelivery': notDelivery,
      });
    }
  },
  mounted(){
    if(this.$route.query.id){
      this.getFreightDetailFn()
    }
  }
};
</script>


<style scoped lang="less">

.img-up{
  width: 100%;
  height: 100%;
}
</style>
